<template>
  <el-drawer
    v-model="dialogFormVisible"
    :before-close="handleClose"
    destroy-on-close
    direction="rtl"
    title="菜单管理新增页面"
    width="36%"
    @close="close"
  >
    <div class="formbody">
      <el-form ref="formRef" class="demo-ruleForm" :inline="true" label-width="130px" :model="form" :rules="rules" status-icon>
        <el-form-item label="菜单ID" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="名称" prop="nodename">
          <el-input v-model="form.nodename" />
        </el-form-item>

        <el-form-item label="类型" prop="types">
          <el-select v-model="form.types" clearable placeholder="请选择类型">
            <el-option v-for="item in menuType" :key="item.codes" :label="item.names" :value="item.codes" />
          </el-select>
        </el-form-item>
        <el-form-item label="打开方式" prop="target">
          <el-select v-model="form.target" clearable placeholder="请选择打开方式">
            <el-option v-for="item in opentype" :key="item.codes" :label="item.names" :value="item.codes" />
          </el-select>
        </el-form-item>
        <el-form-item label="路由" prop="path">
          <el-input v-model="form.path" />
        </el-form-item>
        <el-form-item label="组件" prop="component">
          <el-input v-model="form.component" />
        </el-form-item>
        <el-form-item label="数据权限类型" prop="component">
          <el-select v-model="form.dataPermType" clearable>
            <el-option v-for="item in dataPermTypeList" :key="item.codes" :label="item.names" :value="item.codes" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="重定向" prop="redirect">
          <el-input v-model="form.redirect" />
        </el-form-item> -->
        <el-form-item label="显示图标" prop="icon">
          <el-popover placement="top" popper-class="icon-selector-popper" trigger="hover" :width="400">
            <template #reference>
              <el-button style="width: 100%++++; padding-left: 15px; text-align: left">
                <vab-icon :icon="form.icon" />
                {{ form.icon }}
                <vab-icon icon="arrow-down-s-line" />
              </el-button>
            </template>
            <vab-icon-selector @handle-icon="handleIcon" />
          </el-popover>
        </el-form-item>
        <el-form-item label="显示顺序" prop="showorder">
          <el-input v-model.number="form.showorder" />
        </el-form-item>
        <el-form-item label="不可关闭" prop="noClosable">
          <el-select v-model="form.noClosable" clearable placeholder="是否不可关闭">
            <el-option v-for="item in yesnot" :key="item.codes" :label="item.names" :value="item.codes" />
          </el-select>
        </el-form-item>
        <el-form-item label="描述" prop="remarks">
          <el-input v-model="form.remarks" maxlength="200" placeholder="请输入描述" :rows="4" show-word-limit type="textarea" />
        </el-form-item>
      </el-form>
    </div>

    <div class="footer">
      <el-button type="primary" @click="save">保 存</el-button>
      <el-button @click="close">取 消</el-button>
    </div>
  </el-drawer>
</template>

<script>
import { doAdd, getLocalStorage } from "@/api/mains";
import VabIconSelector from "@/plugins/VabIconSelector/index.vue";
import { succMsg, confirm } from "@/utils/MessageUtils";

export default defineComponent({
  name: "MenuRuterManagementAdd",
  components: { VabIconSelector },
  props: {
    parentid: {
      type: String,
      default: ""
    }
  },

  emits: {
    trigger: null //fetchData事件没有检验
  },
  setup(props, { emit }) {
    const state = reactive({
      formRef: null,
      dialogVisible: true,
      url: "menu",
      form: {
        name: "",
        nodename: "",
        types: "menu",
        target: "",
        path: "",
        component: "",
        redirect: "",
        icon: "list-unordered",
        noClosable: "",
        remarks: "",
        parentid: "", //点击某行再做为parentid
        showorder: "",
        dataPermType: "0"
      },
      menuType: [],
      opentype: [],
      yesnot: [],
      dataPermTypeList: [],

      //数据验证条件
      rules: {
        name: [{ required: true, trigger: "blur", message: "请输入页面name" }],
        types: [{ required: true, trigger: "blur", message: "请输入类型" }],
        nodename: [{ required: true, trigger: "blur", message: "请输入名称" }],
        path: [
          {
            required: true,
            trigger: "blur",
            message: "请输入菜单跳转的路由"
          }
        ],
        component: [{ required: true, trigger: "blur", message: "请输入页面组件" }],
        showorder: [
          {
            required: false,
            type: "number",
            trigger: "blur",
            message: "请输入数字值"
          }
        ]
      },
      title: "",
      dialogFormVisible: false
    });

    const handleIcon = item => {
      state.form.icon = item.icon;
    };

    const showAdd = () => {
      state.form.parentid = props.parentid;
      state.dialogFormVisible = true;
      //枚举数据缓存
      state.menuType = getLocalStorage().MenuType;
      state.form.types = state.menuType[0].codes;
      state.opentype = getLocalStorage().OpenType;
      state.form.target = state.opentype[1].codes;
      state.yesnot = getLocalStorage().BooleanType;
      state.form.noClosable = state.yesnot[1].codes;
      state.dataPermTypeList = getLocalStorage().dataPermType;
      state.form.dataPermType = state.dataPermTypeList[0].codes;
    };

    const close = () => {
      state["formRef"].resetFields();
      state.form = {
        name: "",
        nodename: "",
        types: "",
        target: "",
        path: "",
        component: "",
        redirect: "",
        icon: "",
        noClosable: "",
        remarks: "",
        parentid: ""
      };
      state.dialogFormVisible = false;
    };

    const save = () => {
      state["formRef"].validate(async valid => {
        if (valid) {
          const { code, msg } = await doAdd(state.url, state.form);
          if (code == 200) {
            succMsg(msg);
            emit("trigger");
            close();
          }
        }
      });
    };

    const handleClose = done => {
      confirm("确定退出新增？", () => {
        done();
      });
    };

    return {
      ...toRefs(state),
      handleIcon,
      showAdd,
      close,
      save,
      handleClose
    };
  }
});
</script>
<style lang="scss" scoped>
.footer {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 30%;
  padding: 10px;
  text-align: center;
  background: #ffffff;
  border-top: 1px solid #dcdfe6;
}
.footer button {
  width: 45%;
  margin: 0 2%;
  line-height: 20px;
}
.el-form {
  padding: 2% 0 10%;
  line-height: 20px;
}
.formbody {
  position: absolute;
  inset: 65px 0 55px;
  overflow-x: hidden;
  overflow-y: scroll;
  :deep() {
    .el-form-item,
    .el-input,
    .el-select,
    .el-select--smal {
      width: 100% !important;
    }
    .el-form-item__content {
      width: 65%;
    }
  }
}
</style>
